<!-- 服务详情 -->
<template>
	<view class="page-view">
		<u-navbar :border-bottom="false" :custom-back="backBtnHandle" title="服务详情"></u-navbar>
		<view class="bg-white u-p-30 u-m-b-30">

			<view class="u-font-40 font-medium u-m-b-35">{{detail.title}}</view>

			<view class="u-flex  u-border-bottom u-p-b-25" v-if="detail.user_info">
				<view class="avatar">
					<u-avatar :src="detail.user_info.avatar" size="80" show-level :level-bg-color="config.mainColor"></u-avatar>
				</view>
				<view class="u-m-l-12 u-flex-1">
					<view class="u-font-26 font-medium" style="color: #033E26;">{{detail.user_info.name}}</view>
					<view class="u-tips-color u-font-20 u-line-1">
						<text class="">{{detail.user_info.label}}</text>
						<!-- <text class="divide ">|</text>
						<text class="">{{detail.user_info.edu_name}}</text>
						<text class="divide ">|</text>
						<text class="">从业{{detail.user_info.exp_name}}</text> -->
					</view>
				</view>
				<button class="u-reset-button" open-type="share">
					<text class="iconfont icon-fenxiang1 u-type-primary" style="font-size: 40rpx;"></text>
				</button>
			</view>

			<view class="u-p-t-20 u-p-b-20 u-font-28" style="min-height: 300rpx;">
				<text>{{detail.description}}</text>
			</view>
		</view>

		<view class="u-p-30 u-m-b-30 bg-white">
			<view class="u-font-34 font-medium u-m-b-20">服务价格</view>
			<view class="serve-price">
				<text class="u-tips-color u-font-28">线下帮忙（1对1服务）</text>
				<view class="u-type-error font-medium price">{{detail.price}}</view>
			</view>
		</view>

		<!-- <view class="u-p-30 u-m-b-30 bg-white">
			<view class="u-font-34 font-medium u-m-b-20">交易流程</view>
			<view class="flow-group">
				<view class="u-flex  u-row-between u-m-b-30">
					<view class="flow-item"> 1.客户预约</view>
					<u-line class="u-line"></u-line>
					<view class="flow-item"> 2.把关师接单</view>
					<u-line class="u-line"></u-line>
					<view class="flow-item"> 3.客户下单</view>
				</view>
				<u-line class="p-u-line" direction="col" length="30rpx"></u-line>
				<view class="u-flex  u-row-between">
					<view class="flow-item"> 6.双方评价</view>
					<u-line class="u-line"></u-line>
					<view class="flow-item"> 5.客户确认</view>
					<u-line class="u-line"></u-line>
					<view class="flow-item"> 4.把关师交付</view>
				</view>
			</view>
		</view> -->

		<view class="bottom-action" :class="{show:isOwn==2}">
			<view class="u-flex">
				<view class="u-type-error font-medium pay-total">￥<text class="u-font-34">{{detail.price}}</text></view>
				<u-button type="primary" hover-class="none" shape="circle" plain class="u-m-l-20 u-m-r-20"
					:custom-style="{backgroundColor:'#fff !important'}" @click="toChat">咨询</u-button>
				<u-button type="primary" hover-class="none" shape="circle" class="u-flex-1" @click="navtoPage">一键下单</u-button>
			</view>
		</view>
		<view class="bottom-action" :class="{show:isOwn==1}">
			<view class="u-flex u-row-right">
				<u-button plain hover-class="none" shape="circle" class="u-m-l-20"
					:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="detail.status==1"
					@click="cancelModal = true">撤销审核</u-button>
				<u-button plain hover-class="none" shape="circle" class="u-m-l-20"
					:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="detail.status==2"
					@click="closeModal = true">下架</u-button>
				<u-button plain hover-class="none" shape="circle" class="u-m-l-20"
					:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="detail.status<=0"
					@click="editServe()">编辑</u-button>
				<u-button plain hover-class="none" shape="circle" class="u-m-l-20"
					:customStyle="{color:'#999999',borderColor:'#D9D9D9'}" v-if="detail.status<=0"
					@click="deleteModal = true">删除</u-button>
			</view>
		</view>
		<u-modal v-model="cancelModal" @confirm="cancelHandle" ref="cancelModal" :async-close="true" content="确定要撤销该需求的审核吗？"
			show-cancel-button confirm-color="#FFAA44" z-index="9999"></u-modal>
		<u-modal v-model="closeModal" @confirm="closeHandle" ref="closeModal" :async-close="true" content="确定要下架此项服务吗？"
			show-cancel-button confirm-color="#FFAA44"></u-modal>
		<u-modal v-model="deleteModal" @confirm="deleteHandle" ref="deleteModal" :async-close="true" title="确定要删除此服务吗？"
			content="删除后，无法恢复" show-cancel-button confirm-color="#FFAA44"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {},
				sid: '',
				isOwn: 0, //1:自己 2:其他人
				cancelModal: false,
				closeModal: false,
				deleteModal: false,
				userInfo: this.$store.state.vuex_userInfo,
				isShare: '',
				config: this.$appConfig
			}
		},
		onLoad(e) {
			this.sid = e.id
			this.isShare = e.spid
			this.userInfo = this.$store.state.vuex_userInfo;
			this.queryDetail()
		},
		methods: {
			navtoPage() {
				this.userInfo = this.$store.state.vuex_userInfo;
				if (!this.userInfo.is_real) {
					this.$u.route("/pages/subpage/profile/autonym")
				} else {
					this.$u.route('/pages/subpage/order/action_user', {
						id: this.sid,
						role: 'user'
					})
				}
			},
			toChat() {
				if (this.userInfo) {
					this.$u.route('/pages/subpage/message/chat', {
						uid: this.detail.uid,
						sid: this.sid,
						name: this.detail.user_info.name
					})
				} else {
					this.$u.route('/pages/subpage/login/oneBtnLogin')
				}
			},
			queryDetail() {
				this.$u.api.serveDetail(this.sid).then(res => {
					this.detail = res;
					this.isOwn = res.uid == this.userInfo.id ? 1 : 2
					this.$u.mpShare.title = `${res.title}`
					this.$u.mpShare.path = `pages/subpage/list/serv_detail?id=${res.id}&spid=${this.userInfo.uid}`
				})
			},
			// 撤销审核
			cancelHandle() {
				this.$u.api.cancelServe(this.sid).then(res => {
					this.cancelModal = false
					this.$emit('change')
				})
			},
			// 下架
			closeHandle() {
				this.$u.api.closeServe(this.sid).then(res => {
					this.closeModal = false
					this.$emit('change')
				})
			},
			// 删除
			deleteHandle() {
				this.$u.api.deleteServe(this.sid).then(res => {
					this.deleteModal = false
					this.$emit('change')
				})
			},
			// 编辑
			editServe() {
				this.$u.route('/pages/subpage/publish/service', {
					id: this.sid
				})
			},
			// 返回按钮
			backBtnHandle() {
				if (this.isShare) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-view {
		padding-bottom: 170rpx;
	}

	.avatar {
		transform: scale(0.8);
	}

	.divide {
		margin: 0 10rpx;
	}

	.serve-price {
		background-color: #F6F6F6;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		height: 120rpx;
		justify-content: space-between;
		padding: 0 30rpx;
		margin-bottom: 10rpx;
	}

	.flow-group {
		position: relative;

		.flow-item {
			width: 180rpx;
			height: 56rpx;
			background: #F6F6F6;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #666666;
		}

		.u-line {
			flex: 1;
		}

		.p-u-line {
			position: absolute;
			top: 56rpx;
			right: 90rpx;
		}
	}

	.bottom-action {
		position: fixed;
		bottom: -200rpx;
		width: 100%;
		background-color: #ffffff;
		height: 170rpx;
		padding: 28rpx 30rpx 0 44rpx;
		animation: bottom 1s ease-in;

		&.show {
			bottom: 0;
		}

		.pay-total {
			min-width: 200rpx;
		}
	}
</style>